<template>
  <div
    class="select-container"
    :class="{ 'dropdown-visible': dropdownVisible }"
  >
    <div
      class="input"
      :class="{ focus: dropdownVisible, disabled: disabled }"
      @click="handleShow"
    >
      <span class="input-text">{{ selectLabel }}</span>
      <img
        class="suffix-icon"
        src="@/assets/images/workbench/input-suffix.svg?url"
      />
    </div>
    <ul class="dropdown-list">
      <li
        class="dropdown-item"
        v-for="item in props.list"
        :key="item.value"
        @click="onSelectClass(item)"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: [Number, String]
  },
  list: {
    type: Array,
    default: () => []
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:modelValue'])
const dropdownVisible = ref(false)

const selectLabel = computed(() => {
  const index = props.list.findIndex(item => item.value === props.modelValue)
  return index >= 0 ? props.list[index].label : ''
})

// watch(dropdownVisible, newVal => {
//   if (newVal) {
//     const dropdownElement = document.querySelector('.dropdown-list')
//     dropdownElement && dropdownElement.scrollTo(0, 0)
//   }
// })

const onSelectClass = item => {
  emits('update:modelValue', item.value)
  dropdownVisible.value = false
}

const handleShow = () => {
  if (props.disabled) {
    return
  }
  dropdownVisible.value = !dropdownVisible.value
  if (dropdownVisible.value) {
    document.addEventListener('click', handleClickOutside)
  }
}

const handleClickOutside = e => {
  if (
    !e.target.className.includes('input') &&
    !e.target.className.includes('input-text')
  ) {
    dropdownVisible.value = false
    document.removeEventListener('click', handleClickOutside)
  }
}
</script>
<style lang="less" scoped>
.select-container {
  position: relative;
  width: 645px;
  height: 40px;

  .input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: rgba(4, 11, 26, 0.4);
    box-sizing: border-box;
    border-radius: @radius-component;
    box-shadow: 0 0 0 1px #9bc3ff inset;
    background-color: #fff;
    cursor: pointer;
    padding: 0 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .suffix-icon {
      width: 13px;
      transform: rotate(180deg);
    }
  }

  .disabled {
    background-color: #f5f7fa;
  }

  .focus {
    box-shadow: 0 0 0 1px #1a70e8 inset;
    color: #1a70e8;
  }

  .dropdown-list {
    display: none;
    max-height: 176px;
    position: absolute;
    z-index: 1;
    top: 35px;
    left: 0;
    width: 100%;
    padding: 5px 19px 0 19px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 5px 5px;
    border: 1px solid @color-neutral-line-light;
    border-top: none;
    overflow: hidden scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .dropdown-item {
      padding: 12px 0;
      border-bottom: 1px solid @color-neutral-line-light;
      font-weight: 500;
      font-size: @size-nav4;
      color: @color-neutral-text-assist;
      cursor: pointer;

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.dropdown-visible {
  .input {
    z-index: 10;

    .suffix-icon {
      transform: rotate(0deg) !important;
    }
  }

  .dropdown-list {
    display: block;
    z-index: 9;
  }
}
</style>
